<template>
	<view class="coupon" @tap="handleTap">
		<image src="/static/coupon.png" mode="widthFix" class="bg"></image>
		<view class=" coupon-box">
			<view class="coupon-hd u-flex u-flex-between">
				<view class="title">支付满减券</view>
				<view class="time">有效期{{ info.day || 0 }}天</view>
			</view>
			<view class="coupon-bd">
				<!-- <text class="text-primary">30元</text>
				<text>立减券</text> -->
				{{ info.name }}
			</view>
			<view class="coupon-ft">
				<template v-if="type == 0 || type == 3">
					满{{ info.amount }}减{{ info.deduct }}
				</template>
				<template v-else>
					满{{ info.amount }}可用， 需花费
					<text class="u-primary">{{ info.score }}花蜜</text>
					兑换
				</template>
			</view>
		</view>
		<view class="state flex align-center justify-center" :class="{ grey: info.status == 2 || info.status == 3 }">
			<view>
				<view v-for="(t, index) in stateList[type == 1 ? 3 : type == 3 ? 6 : info.status - 1]">{{ t }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	name: 'coupon',
	data() {
		return {
			stateList: ['去使用', '已使用', '已失效', '去兑换', '已抢光', '已兑换', '点击使用']
		};
	},
	props: {
		type: {
			type: [String, Number],
			default: 0 //0 表示列表 1表示兑换 2表示使用 3去使用
		},
		info: {
			type: Object,
			default: () => {}
		}
	},
	computed: {
		...mapState(['isLogin', 'userInfo'])
	},
	methods: {
		handleTap() {
			if (this.isLogin) {
				if (this.type == 1 && this.info.status == 1) {
					if (this.userInfo.is_vip == 1) {
						this.getCoupon();
					} else {
						uni.showToast({
							title: '请先开通会员，再领取优惠券哦~',
							icon: 'none'
						});
					}
				}
				if (this.type == 0 && this.info.status == 1) {
					uni.switchTab({
						url: '/pages/classify/classify'
					});
				} else {
					this.$emit('confrim', this.info);
				}
			} else {
				this.$Router.push({
					path: '/pages/login/login',
					query: {
						backtype: 2,
						backpage: '/pages/account/account'
					}
				});
			}
		},
		/**
		 * 领取优惠券
		 */
		getCoupon() {
			let $me = this;
			uni.showModal({
				title: '提示',
				content: '您确定花费' + $me.info.score + '花蜜兑换' + $me.info.deduct + '元优惠券，该优惠券有效期为' + $me.info.day + '天',
				success: res => {
					if (res.confirm) {
						$me.$postAction($me.$api.getCoupon + $me.info.id).then(da => {
							if (da.code == 0) {
								uni.showToast({
									title: '领取成功',
									icon: 'none'
								});
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.coupon {
	height: 272upx;
	position: relative;
	width: 694upx;
	margin: 0 auto 20upx;
	.bg {
		display: block;
		width: 631upx;
		height: 272upx;
		position: absolute;
		z-index: 1;
	}
	.state {
		background: var(--nav-bg);
		color: #fff;
		height: 260upx;
		position: absolute;
		right: 10upx;
		top: 5upx;
		width: 96upx;
		border-radius: 0px 20upx 20upx 0px;
		padding-left: 22upx;
		font-size: 28upx;
		text-align: center;
		&.grey {
			background: #aeaeb2;
		}
	}
	.coupon-box {
		position: absolute;
		left: 0;
		width: 631upx;
		top: 0;
		z-index: 2;
		color: $u-main-color;
		font-size: 24upx;
	}
	.coupon-hd {
		border-bottom: 1px dashed #c5c5c5;
		line-height: 80upx;
		margin: 0 29upx;
	}
	.time {
		font-size: 24upx;
		color: #636366;
		margin-right: 10upx;
	}
	.title {
		position: relative;
		padding-left: 27upx;
		font-size: 28upx;
		&::before {
			content: '';
			display: block;
			width: 6upx;
			height: 28upx;
			background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
			border-radius: 3upx;
			position: absolute;
			left: 5upx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.coupon-bd {
		font-weight: 600;
		line-height: 62upx;
		font-size: 44upx;

		padding-left: 34upx;
		line-height: 62upx;
		padding-top: 35upx;
	}
	.coupon-ft {
		padding-left: 34upx;

		line-height: 33upx;
		color: #636366;
		margin-top: 8upx;
	}
}
</style>
